<script setup>
import { ElMessage ,ElMessageBox} from 'element-plus';
import { onBeforeMount, reactive, toRefs ,ref} from 'vue';
import {getUserListHandler,deleteUserHandler} from '../../api/user.js';
import Add from './Add.vue'
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
]
const data = reactive({
    items: [],
    userForm:{
        username: "",
        qq: "",
        address: ""
    }
})
const loading = ref(true)
const addUserDialog = ref(false)
const defaultMethod = ref('Create')
//解构items
const {items,userForm} = toRefs(data)
//获取用户列表的方法
const getUserList = ()=>{
    loading.value = true
    getUserListHandler().then((response)=>{
    console.log("登录response:",response.data.data.items)
    data.items = response.data.data.items
    loading.value = false
})
}
//删除用户的方法
const deleteUser = (row)=>{
        ElMessageBox.confirm(
        '你确定要删除用户：'+ row.username,
        {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ) .then(() => {
            console.log("当前行的数据：",row)
                deleteUserHandler(row.id).then((response)=>{
                console.log("登录response:",response.data.data.items)
                    ElMessage({
                        message: response.data.message,
                        type: 'success',
                    })
                    //用户删除后自动更新列表
                    getUserList()
                    // loading.value = false
        })
    })
    .catch(() => {
      ElMessage({
            type: 'info',
            message: 'Delete canceled',
      })
    })
}


//添加用户的方法
const addUser = ()=>{
    data.userForm = {}
    defaultMethod.value="Create"
    addUserDialog.value = true
}
const editUser = (row)=>{
    defaultMethod.value="Edit"
    addUserDialog.value = true
    data.userForm = row
}

//打开页面直接请求加载
onBeforeMount(()=>{
    getUserList()
})
const closeDialog = () =>{
    getUserList()
}

const rollback = () =>{
    addUserDialog.value = false
    getUserList()
}



</script>

<template>
          <!-- <el-card v-loading="true" element-loading-text="玩命加载中..."> -->
            <el-card v-loading="false">
            <template #header>
            <div class="card-header">
                <span>用户列表</span>
                <el-button @click="addUser()" class="button" text>添加</el-button>
            </div>
            </template>
            <!-- 放真实数据的地方，card body -->
            <el-table 
            border 
            height="480" 
            :data="items" 
            style="width: 100%">
                <el-table-column  prop="username" label="用户名" width="180" />
                <el-table-column sortable fixed prop="id" label="ID" width="180" />
                <el-table-column   prop="qq" label="QQ号" width="180" />
                <el-table-column   prop="address" label="地址" width="180" />
               
                <el-table-column fixed="right" label="操作" >
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="editUser(scope.row)">编辑</el-button>
                    <el-button link type="warning" size="small" @click="deleteUser(scope.row)">删除</el-button>

                </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog   
        destroy-on-close 
        @close="closeDialog()" 
        v-model="addUserDialog" 
        :title= "defaultMethod=='Create'?'添加用户':'更新用户'"
        width="40%">
            <!-- <Add @rollback="getUserList"></Add> -->
            <Add @rollback="rollback()" :user-form="userForm" :method="defaultMethod"></Add>

        </el-dialog>
</template>

<style scoped>
.card-header{
    display: flex;
    justify-content: space-between;
    align-content: center;
}

</style>
